import React from "react";
import { Toast, NavBar } from "react-vant";
import { ProductCard, Tag, Button } from "react-vant";
import { useNavigate } from "react-router-dom";
function Dingxiang() {
  const navigate = useNavigate();
  return (
    <div> 
        <div>
          <NavBar title="订单详情" onClickLeft={() => navigate(-1)} />
        </div>
      <div style={{padding:'0 20px',boxSizing:'border-box'}}>
       
        <div>
          <ProductCard
            num="2"
            desc="描述信息"
            title="商品名称"
            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
          />
        </div>
        <div>
          <h4>订单明细</h4>
          <div
            style={{
              width: "100%",
              height: "200px",
              border: "1px solid #ccc",
              borderRadius: "10px",
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                padding: "10px",
              }}
            >
              <p>票价</p>
              <p style={{ fontWeight: "bold" }}>￥299</p>
            </div>

            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                padding: "10px",
              }}
            >
              <p>手续</p>
              <p style={{ fontWeight: "bold" }}>￥1</p>
            </div>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                padding: "10px",
              }}
            >
              <p>总价</p>
              <p style={{ fontWeight: "bold" }}>￥309</p>
            </div>
          </div>
        </div>

        
      </div>
      <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            position: "fixed",
            bottom: "0",
            width: "100%",
            background: "white",
          }}
        >
          <p style={{ fontWeight: "bold" }}>￥299</p>
          <p onClick={() => navigate("/zhifu")}>
            <button
              style={{
                width: "100px",
                height: "30px",
                background: "orange",
                color: "white",
                border: "none",
                borderRadius: "5px",
                marginRight: "10px",
              }}
            >
              支付
            </button>
          </p>
        </div>
    </div>
  );
}

export default Dingxiang;
